<template>
    <div>
        <Card>
            <Row>
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="仓库名称" prop="name">
                        <div class="filters-input">
                            <el-select value-key="id" v-model="filters.warehouseValue" @change="loadData">
                                <el-option v-for="item in warehouseList" :key="item.id" :value="item" :label="item.warehouseName"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="物资编码">
                        <el-input v-model="filters.materialCode"></el-input>
                    </FormItem>
                    <FormItem label="物资名称">
                        <el-input v-model="filters.materialName"></el-input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" size="large" @click="loadData">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <Row>
                <Button type="primary" size="large" @click="appearModal">库存盘点</Button>
            </Row>
            <Row>
                <el-table stripe border :data="tableData" @selection-change="handleSelectionChange">
                    <template slot="empty">暂无数据</template>

                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column label="仓库" prop="warehouseName"></el-table-column>
                    <el-table-column label="物资类别" prop="materialClass"></el-table-column>
                    <el-table-column label="物资编号" prop="materialCode"></el-table-column>
                    <el-table-column label="物资名称" prop="materialName"></el-table-column>
                    <el-table-column label="物资规格" prop="materialSpecifications"></el-table-column>
                    <el-table-column label="物资单位" prop="materialUnit"></el-table-column>
                    <el-table-column label="当前库存" prop="number"></el-table-column>
                    <el-table-column label="盘点库存">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.changingNumber"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
                <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                      show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
                </Page>
            </Row>
        </Card>

        <Modal v-model="modalVisible" title="备注">
            盘点时间:<el-date-picker v-model="inventory.warehousingTime" type="datetime"></el-date-picker>
            备注:<el-input v-model="inventory.remark" placeholder="请输入备注"></el-input>
            <div slot="footer">
                <Button type="primary" @click="submitUpload">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import moment from "moment";
    export default {
        data(){
            return{
                pageNum:1,
                pageSize:10,
                pageTotal:0,
                modalVisible:false,

                warehouseList:[],
                tableData:[],

                filters:{
                    materialCode:"",
                    materialName:"",
                    warehouseValue:{},
                },

                inventory:{
                    dtlList:[],
                },
            }
        },
        created() {
            this.getWarehouse();
        },
        methods:{
            getWarehouse() {
                this.getRequest("/api/whsc/warehouses?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(resp => {
                    if (resp.code == 20000) {
                        this.warehouseList = resp.data.list;
                        this.filters.warehouseValue=this.warehouseList[0];
                        this.loadData();
                    }
                });
            },
            loadData(){
                let param="&warehouseId="+this.filters.warehouseValue.id+"&materialCode="+this.filters.materialCode+"&materialName="+this.filters.materialName;
                this.getRequest("/api/inventory/stocks?pageNum="+this.pageNum+"&pageSize="+this.pageSize+param).then(resp=>{
                    if (resp.code==20000){
                        this.tableData=resp.data.list;
                        this.pageNum=resp.data.pageNum;
                        this.pageTotal=resp.data.total;
                    }
                });
            },
            appearModal(){
                this.modalVisible=true;
            },
            handleSelectionChange(selection){
                this.inventory.dtlList=selection;
            },
            submitUpload(){
                if (this.inventory.dtlList.length==0){
                    this.$Message.error("请选择需要盘点的物资");
                    return;
                } else {
                    this.inventory.warehouseId=this.filters.warehouseValue.id;
                    this.inventory.warehouseName=this.filters.warehouseValue.warehouseName;
                    if (this.inventory.warehousingTime){
                        this.inventory.warehousingTime=moment(this.inventory.warehousingTime).format("YYYY-MM-DD HH:mm:ss");
                    } else {
                        this.$Message.error("请选择盘点时间");
                        return;
                    }
                    this.postJsonRequest("/api/material/record/inventory",this.inventory).then(resp=>{
                        if (resp.code==20000){
                            this.$Message.success("更新库存成功");
                            this.modalVisible=false;
                            this.loadData();
                        }
                    });
                }
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        },
    }
</script>
